<template>
  <n-form-item :required="item.required" require-mark-placement="left">
    <template #label>
      <div class="label">
        <span>
          {{ item.label }}
        </span>
        <n-tooltip v-if="item.tooltip">
          <template #trigger>
            <i class="icon-ph:question-fill help-icon" />
          </template>
          {{ item.tooltip }}
        </n-tooltip>
      </div>
    </template>
    <slot></slot>
  </n-form-item>
</template>
<!-- 表单的每一项 -->
<script setup lang="ts">
defineProps<{
  item: any
}>()
</script>
<style scoped lang="scss">
.label {
  @apply flex items-center gap-1 leading-4;
  .help-icon {
    @apply text-lg cursor-pointer hover:op90 text-black/50;
  }
}
</style>
